<template>
  <div class="wrap">
    <el-popover
      ref="popover4"
      placement="bottom"
      @show="popoverShow"
      @after-leave="popoverHide"
      width="240"
      trigger="click">
      <m7-tree
        class="el-tree1"
        ref="tree"
        height="280"
        node-key="_id"
        :show-checkbox="true"
        :data="treeData"
        :check-strictly="true"
        :props="{children: 'childs', label: 'name'}"
        accordion
        :filter-node-method="filterNode"
        :default-expanded-keys="treeData[0] ? [treeData[0]._id]: []"
        :default-expand-all="false"
        @check="save"
      >
      </m7-tree>
    </el-popover>
    <div>
      <div class="el-select el-select--mini" v-popover:popover4 @click="inputClick">
        <div class="el-select__tags tag-input">
          <div v-if="checkedArr.length" style="display: flex">
            <el-tag
              size="mini"
              type="info"
              @close="deleteAgent"
              closable>
              <span class="tag-max">{{tagName}}</span>
            </el-tag><el-tag type="info" size="mini" v-if="checkedArr.length > 1">+{{checkedArr.length - 1}}</el-tag>
          </div>
          <input type="text"
                 autocomplete="off"
                 debounce="0"
                 class="el-select__input is-mini"
                 ref="input" v-model="value">
        </div>
        <div class="el-input el-input--mini">
          <input type="text" autocomplete="off" :placeholder="placeholder" readonly="readonly" class="el-input__inner" style="height: 28px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import m7Tree from '../../../ui-modules/tree/src/tree'
  import {union} from 'lodash'
  export default {
    name: 'exportCatalogue',
    data () {
      return {
        value: '',
        checkedArr: [],
        branch: []
      }
    },
    props: {
      treeData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {
      m7Tree
    },
    computed: {
      placeholder () {
        return this.value || this.checkedArr.length ? '' : this.$t('public.pleasePick')
      },
      tagName () {
        let length = this.checkedArr.length
        if (length) {
          let node = this.$refs.tree.getNode(this.checkedArr[length - 1])
          return node && node.label
        }
      }
    },
    watch: {
      value (val) {
        this.$refs.tree.filter(val)
      }
    },
    methods: {
      inputClick () {
        this.$refs.input.focus()
      },
      filterNode (value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      popoverShow () {
      },
      popoverHide () {
        this.$nextTick(() => {
          this.value = ''
        })
      },
      save (data, checked) {
        // 当前节点选中
        if (checked.checkedKeys.indexOf(data._id) !== -1) {
          let keys = getKeysFromTree(data.childs || [])
          this.checkedArr = union(keys, checked.checkedKeys)
          this.$refs.tree.setCheckedKeys(this.checkedArr)
        } else {
          this.checkedArr = checked.checkedKeys
        }
      },
      reset () {
        this.checkedArr = []
        this.$refs.tree.setCheckedKeys([])
        this.$refs.tree.reset()
      },
      deleteAgent () {
        let lastKey = this.checkedArr.pop()
        this.$refs.tree.setChecked(lastKey, false)
      }
    },
    mounted () {
    }
  }
  function getKeysFromTree (childs = [], arr = []) {
    childs.forEach((item) => {
      arr.push(item._id)
      if (item.childs && item.childs.length) {
        getKeysFromTree(item.childs, arr)
      }
    })
    return arr
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl";
  .el-select
    width 100%
    box-sizing border-box
  .tag-input
    width calc(100% - 20px)
    display flex
    flex-direction row
    flex-wrap nowrap
    justify-content left
  .tag-max
    max-width 60px
  .el-tree1
    padding-bottom 5px
    max-height 280px
    overflow auto
    border none
</style>
